 <template>
  <div id="shopcar">
    <div class="head">
      <i class="iconfont icon-left"
         @click="go()"></i>
      <div class="person-center">购物车</div>
      <i class="iconfont icon-menuunfold"
         @click="display()"></i>
      <ul class="nav"
          v-show="isActive">
        <li>
          <router-link to="/showss"
                       :class="'nav-link'">
            <i class="iconfont icon-sanguohome"></i>
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link to="/typess"
                       :class="'nav-link'">
            <i class="iconfont icon-icon04"></i>
            <span>分类搜索</span>
          </router-link>
        </li>
        <li>
          <router-link to="/shopcarss"
                       :class="'nav-link'">
            <i class="iconfont icon-shop-cart-"></i>
            <span>购物车</span>
          </router-link>
        </li>
        <li>
          <router-link to="/myss"
                       :class="'nav-link'">
            <i class="iconfont icon-i-smile"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div v-for="(item,index) in shop"
         class="shop-item">
      <div class="check"
           @click="change(index)">
           <h1 v-show="false">{{msg}}</h1>
        <i v-if="a[index]" class="iconfont icon-check-out"></i>
        <i v-else class="iconfont icon-Checktheagreement-ring"></i>
      </div>
      <div class="shop-item-right">
        <div class="product-img"><img :src="item.img"
               alt=""></div>
        <div class="product-content">
          <p>{{item.type}}</p>
          <div class="count">
            <p class="num">
              数量
            </p>
            <div class="add-count">
              <i class="iconfont icon-jian" v-show="item.count>1" @click="reduce(item)"></i>
              <i class="iconfont icon-searchdelelte30" v-show="item.count<2" @click="atten()"></i>
              <span class="number">{{item.count}}</span>
              <i class="iconfont icon-hao" @click="add(item)"></i>
            </div>
          </div>
          <p class="price">{{item.price}}</p>
        </div>
              <div class="atten" v-show="exist">
              <div class="sure">
                <p class="sure-title">确认删除此商品吗？</p>
                <p class="select">
                  <span @click="cancel()">取消</span>
                  <span @click="del(index)">确认</span>
                </p>
              </div>
            </div>
      </div>


    </div>
    <div class="footer">
      <p class="list-head">
        <span v-for="(item,index) in list" @click="changeColor(index)" :class="{orange:id==index}">{{item}}</span>
      </p>
      <div class="like-list" v-show="id==1">
      <div v-for="(item,index) in like1" class="cho">
        <div class="cho-img"><img :src="item.pic" alt=""></div>
        <p class="cho-title">{{item.title}}</p>
        <p class="cho-price">{{item.price}}</p>
      </div>
      </div>
      <div class="like-list" v-show="id==0">
      <div v-for="(item,index) in like2" class="cho">
        <div class="cho-img"><img :src="item.pic" alt=""></div>
        <p class="cho-title">{{item.title}}</p>
        <p class="cho-price">{{item.price}}</p>
      </div>
      </div>
    </div>
      <div class="total">     
      <p class="totalprice">合计
        <span class="orange">¥239</span>
      </p>
      <p class="totallist">去结算
        (2)
      </p>
    </div>
    
  </div>
</template>
<style scoped> 
#shopcar{
 background: #E9ECF0;
 height: 100vh;
 position: relative;

}
.atten{
  width: 100%;
  height: 100vh;
  background: rgba(27, 25, 25, 0.726);
  position: absolute;
   top: 0;
   z-index: 999;
   left: 0px;
}
.sure{
  width: 70%;
  background: white;
  color: #71797F;
  font-size: 1rem;
  border-radius: 0.86rem;
  text-align: center;
  margin:0px auto;
  margin-top: 50%;
}
.sure-title{
  padding: 1.7rem 2rem;
}
.select{
  border-top: 1px solid #D0D0D0;
  display: flex;
}
.select>span{
 width: 50%;
 height: 50px;
 line-height: 50px;
}
.select>span:nth-of-type(1){
  border-right: 1px solid #D0D0D0;
}
.select>span:nth-of-type(2){
  color: #FF734C;
}
.list-head{
 display: flex;
 justify-content: space-around;
}

.orange{
  color: #ff734c;
}
.color {
  color: red;
}
.head {
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: white;
}
.person-center {
  height: 3.14rem;
  line-height: 3.14285714rem;
  background: #fff;
  font-size: 1.14rem;
  text-align: center;
  line-height: 3.14rem;
  position: relative;
}

.iconfont {
  display: block;
  line-height: 3.14rem;
  font-size: 20px;
}
.nav {
  position: absolute;
  background: white;
  right: 10px;
  top: 3rem;
  font-size: 14px;
  border: 1px solid #e9ecf0;
  border-radius: 0.286rem;
  box-shadow: 0 4px 12px 0 #e9ecf0;
  z-index: 99;
}
.nav .iconfont {
  line-height: normal;
  display: inline-block;
  font-size: 1rem;
  margin-right: 0.4rem;
}
.nav li {
  height: 3rem;
  line-height: 3rem;
  padding: 0rem 0.85rem;
}
.nav::before {
  content: "";
  width: 6px;
  height: 6px;
  background: white;
  position: absolute;
  transform: rotate(45deg);
  border-left: 1px solid #e9ecf0;
  border-top: 1px solid #e9ecf0;
  top: -5px;
  right: 15px;
}
.nav-link {
  text-decoration: none;
  color: black;
}

.shop-item {
  display: flex;
  padding: 0.5rem 0.8rem 0rem 0.8rem;
  font-size: 0.9rem;
  align-items: center;
  background: white;
}
.check {
  display: inline-block;
  width: 16%;
}
.shop-item-right {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecf0;
}
.product-img {
  width: 33%;
}
.product-img > img {
  width: 100%;
  display: block;
}
.product-content {
  width: 63%;
  position: relative;
}
.count {
  display: flex;
  margin-top: 0.5rem;
  /* justify-content: space-between; */
}
.price {
  position: absolute;
  bottom: 0%;
  font-size: 1rem;
  color: #ff734c;
  font-weight: 500;
}
.add-count {
  display: flex;
  justify-content: space-around;
  vertical-align: middle;
  width: 53%;
  text-align: center;
  border-top: 1px solid #e9ecf0;
  border-bottom: 1px solid #e9ecf0;
  background-color: #f7f9fa;
}
.num {
  width: 20%;
}
.add-count > .iconfont {
  font-size: 9px;
  line-height: 1.3rem;
  height: 1.3rem;
  border-right: 1px solid #e9ecf0;
  border-left: 1px solid #e9ecf0;
}
.add-count > span {
  display: inline-block;
}
.icon-searchdelelte30 {
  width: 20%;
}
.icon-jian{
   width: 20%;
}
.icon-hao {
  width: 20%;
}
.number {
  width: 60%;
}
.like-list{
  display: flex;
  overflow-x: scroll;
  margin-top: 1.4rem;
}
.cho-title{
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
  margin-top: 0.57rem;
}
.cho-price{
   margin-top: 0.3rem;
}
.footer{
  font-size: 0.8rem;
  padding: 0.85rem 1.1rem 0.7rem;
  background: white;
  margin-top: 0.57rem;
}
.cho{
  width: 5.7rem;
  margin-right: 1.1rem;
}
.cho-img{
  width: 100%;
  border: 1px solid #E9ECF0;
}
.cho-img>img{
  width: 100%;
  display: block;
}
.total{
  display: flex;
  position: fixed;
  background: white;
  bottom:0px;
  width: 100%;
  height: 3.5rem;
  justify-content: space-between;
  line-height: 3.5rem;
}
.totalprice{
  width: 65%;
  padding-left: 1rem;
}
.totallist{
  width: 35%;
  text-align: center;
  background: #FF734C;
  color: white;
}
</style>
<script>
import { Toast } from 'mint-ui';
import signup from '../common/signUp';
export default {
  data () {
    return {
      isActive: false,
      shop: [],
      a: [],
      b:[],
      msg:0,
      like1:[],
      like2:[],
      id:0,
      list:[
        "购买该商品的还购买了",
        "巧克力/蛋糕"
      ],
      exist:false
    }
  },
  components: {
    signup
  },
  methods: {
    go () {
      this.$router.back();
    },
    display () {
      this.isActive = !this.isActive
    },
    change (index) {
      this.msg++
      // console.log(this.a)//两个下标
      // console.log(this.a[index],index)
      if (this.a[index]) {
        this.a[index] = false
      } else {
       this.a[index] = true
      }    
    },
    // total(num,a){
    //   var sum=0;
    //   for(var index in this.shop){
    //     for(var i=0 ;i<this.shop.length;i++){
    //       if(this.a[index]==true){
    //          sum+=this.shop[index].price*num.count;
    //            }  
    //         //  return sum; 
    //          console.log(sum)        
    //        }
    //     }         
    // },
    changeColor(index){
         if(this.id!=index){
             this.id=index
         }
    },
    add(num){
         num.count++
    },
    reduce(num){
         num.count--

    },
    del(index){
      this.shop.splice(index,1);
      this.exist=!this.exist
    },
    atten(){
      this.exist=!this.exist
    },
    cancel(){
      this.exist=false
    }
    
  },
  mounted () {
    this.$http.get('./data/shopcar.json').then(res => {
      this.shop = res.data.shop;
      this.like1=res.data.like.like1;
      this.like2=res.data.like.like2;
    });
    
  }
}
</script>